<template>
  <div class="page_body">
    <HomeTop :topTitle="topTitle"></HomeTop>
    <div class="register_body">
      <div
        style="
          width: 100vw;
          display: flex;
          flex-direction: column;
          align-items: center;
        "
      >
        <div class="register_from_box">
          <!-- 身份信息栏 -->
          <div v-if="stepKey != 2">
            <div class="register_from_item border_item">
              <div class="border_item_popup_box" style="height: 100%">
                <div class="coach_register_from_upload_img">
                  <div class="border_item_title">
                    <div class="border_item_title_tips">*</div>
                    个人免冠照片
                  </div>
                  <div
                    class="border_item_popup no_value_item"
                    style="width: 4.8rem; height: 0.94rem; line-height: 0.94rem"
                  >
                    请上传图片
                  </div>
                </div>

                <div class="upload_img_box">
                  <img
                    v-if="teamData.photo == null || teamData.photo == ''"
                    class="upload_img_box_icon"
                    src="../../assets/image/upload_img_bg03.png"
                  />
                  <img
                    v-if="teamData.photo != null && teamData.photo != ''"
                    class="upload_img_box_icon"
                    :src="teamData.photo"
                  />
                  <input
                    type="file"
                    accept="image/*"
                    ref="uploadImg"
                    id="upload_img_btn"
                    @change="uploadImgBtn($event)"
                  />
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                队员姓名
              </div>
              <input
                class="register_from_item_input"
                placeholder="请输入队员名称"
                type="text"
                v-model="teamData.teamName"
                maxlength="7"
              />
            </div>

            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                年龄
              </div>
              <input
                class="register_from_item_input"
                placeholder="请输入年龄"
                v-model="teamData.teamNum"
                type="number"
                oninput="if(value.length>2)value=value.slice(0,2)"
              />
            </div>

            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                身高(cm)
              </div>
              <input
                class="register_from_item_input"
                placeholder="请输入身高"
                v-model="teamData.leaderName"
                type="number"
                oninput="if(value.length>3)value=value.slice(0,3)"
              />
            </div>
            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                体重(kg)
              </div>
              <input
                class="register_from_item_input"
                placeholder="请输入体重"
                v-model="teamData.leaderNumber"
                type="number"
                oninput="if(value.length>3)value=value.slice(0,3)"
              />
            </div>
            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                性别
              </div>
              <van-dropdown-menu>
                <van-dropdown-item v-model="value2" :options="option2" />
              </van-dropdown-menu>
            </div>
            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                证件类型
              </div>
              <van-dropdown-menu>
                <van-dropdown-item v-model="value1" :options="option1" />
              </van-dropdown-menu>
            </div>

            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                证件号码
              </div>
              <input
                class="register_from_item_input"
                placeholder="请输入证件号码"
                type="text"
                v-model="teamData.identity_number"
                maxlength="18"
              />
            </div>
          </div>
          <div
            class="register_from_item upload_img_item"
            style="justify-content: space-around; margin-top: 0.4rem"
            v-if="this.value1 == 1"
          >
            <div class="upload_file_box">
              <img
                v-if="
                  teamData.identity_up == null || teamData.identity_up == ''
                "
                class="upload_file_box_img"
                src="../../assets/image/identity_up_img01.png"
              />
              <img
                v-if="
                  teamData.identity_up != null && teamData.identity_up != ''
                "
                class="upload_file_box_img"
                :src="teamData.identity_up"
              />

              <input
                type="file"
                accept="image/*"
                ref="identityUp"
                class="upload_file_box_input"
                @change="uploadIdentityBtn($event, '1')"
              />
              <div class="upload_file_box_btn">+上传身份证人像面</div>
            </div>
            <div class="upload_file_box">
              <img
                v-if="
                  teamData.identity_down == null || teamData.identity_down == ''
                "
                class="upload_file_box_img"
                src="../../assets/image/identity_down_img01.png"
              />
              <img
                v-if="
                  teamData.identity_down != null && teamData.identity_down != ''
                "
                class="upload_file_box_img"
                :src="teamData.identity_down"
              />
              <input
                type="file"
                accept="image/*"
                ref="identityDown"
                class="upload_file_box_input"
                @change="uploadIdentityDownBtn($event, '2')"
              />
              <div class="upload_file_box_btn">+上传身份证国徽面</div>
            </div>
          </div>
          <div class="imgs" v-if="this.value1 != 1">
            <div class="upload_file_box">
              <img
                v-if="
                  teamData.identity_up == null || teamData.identity_up == ''
                "
                class="upload_file_box_img"
                src="../../assets/image/tpsc.png"
              />
              <img
                v-if="
                  teamData.identity_up != null && teamData.identity_up != ''
                "
                class="upload_file_box_img"
                :src="teamData.identity_up"
              />

              <input
                type="file"
                accept="image/*"
                ref="identityUp"
                class="upload_file_box_input"
                @change="uploadbut($event)"
              />
              <div class="upload_file_box_btn">+上传证件照片</div>
            </div>
            <!-- <div class="upload_file_box">
              <img
                v-if="
                  teamData.identity_down == null || teamData.identity_down == ''
                "
                class="upload_file_box_img"
                src="../../assets/image/to_icon03.png"
              />
              <img
                v-if="
                  teamData.identity_down != null && teamData.identity_down != ''
                "
                class="upload_file_box_img"
                :src="teamData.identity_down"
              />

              <input
                type="file"
                accept="image/*"
                ref="identityUp"
                class="upload_file_box_input"
                @change="uploadButs($event)"
              />
              <div class="upload_file_box_btn">+上传证件反面</div>
            </div> -->
          </div>
          <div class="register_from_send_btn" @click="add()">添加</div>
          <!-- <div
              class="register_from_send_btn"
              v-if="stepKey == 3"
              @click="submitDataFn()"
            >
              提交
            </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<style src="../../assets/css/game/addMemberDetails.css"></style>

<script>
import { Indicator, Toast } from "mint-ui";
import { DropdownMenu, DropdownItem } from "vant";
// import "vant/lib/dropdownMenu/style";
// import "vant/lib/dropdownItem/style";
import HomeTop from "@/components/homeTop.vue";
export default {
  name: "CoachImprove",
  components: {
    HomeTop,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
  },
  data() {
    return {
      baseAPIUrl: this.$store.state.baseAPIUrl,
      topTitle: "选择队员",
      stepKey: 1, // 步骤条值
      teamData: {
        photo: "", //队伍图片
        teamName: "", // 队伍名称
        teamNum: "", //队伍人数
        leaderName: "", //领队姓名
        leaderNumber: "", //
        identity_number: "", // 证件号
        identity_up: "", // 证件正面
        identity_down: "", // 证件反面
      },
      identity_up: "",
      identity_down: "",
      type: "",
      uploadUrl: "", // 提交用图片路径Q
      imgUrl: "",
      url: "",
      value1: 1,
      option1: [
        { text: "请选择证件类型", value: 0 },
        { text: "身份证", value: 1 },
        { text: "护照", value: 2 },
        { text: "港、澳、台胞证件 ", value: 3 },
        { text: "其他", value: 4 },
      ],
      option2: [
        { text: "男", value: "男" },
        { text: "女", value: "女" },
      ],
      value2: "",
    };
  },
  created: function () {},
  methods: {
    // 上传头像图片
    uploadImgBtn: function (e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 5) {
        Toast({
          message: "照片大小超过5MB",
          duration: 3000,
        });
        that.$refs.uploadImg.value = "";
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            let image = new Image();
            image.onload = function () {
              let width = image.width;
              let height = image.height;
              let cl = height / width;
              that.uploadImgFnhead(res.target.result);
              // if (cl >= 1.28 && cl <= 1.52) {

              // } else {
              //   that.$refs.uploadImg.value = "";
              //   Toast({
              //     message: "照片尺寸不合规",
              //     duration: 3000,
              //   });
              // }
            };
            image.src = res.target.result;
          };
          reader.readAsDataURL(file);
        }
      }
    },

    // 上传图片到服务器
    uploadImgFnhead: function (imgData) {
      let that = this;
      let url = "/upload/uploadPhoto";
      let data = {
        image: imgData,
      };
      // Indicator.open("上传中...");
      this.axios
        .post(url, JSON.stringify(data))
        .then((res) => {
          // Indicator.close();
          // console.log(res, "222");
          if (res.code == 0) {
            let path = res.image;
            that.uploadUrl = res.image;
            that.teamData.photo = path;
          } else {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    // 上传身份证正面
    uploadIdentityBtn: function (e, id) {
      // console.log(e, id, "222");
      this.type = id;
      // console.log(typeof this.type);
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        that.$refs.identityDown.value = "";
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            that.uploadIdentityFn(res.target.result, 2);
          };
          reader.readAsDataURL(file);
        }
      }
    },
    // 上传身份证背面
    uploadIdentityDownBtn: function (e, id) {
      this.type = id;
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        that.$refs.identityDown.value = "";
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            that.uploadIdentityFn(res.target.result, 2);
          };
          reader.readAsDataURL(file);
        }
      }
    },

    // 上传身份证到服务器
    uploadIdentityFn: function (imgData) {
      // console.log(this.value1, "111");
      let that = this;
      let url = "/upload/uploadCard";
      // let uploadType = type;
      let data = {
        type: this.type,
        image: imgData,
      };
      Indicator.open("上传中...");
      this.axios
        .post(url, JSON.stringify(data))
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            // console.log(response, "2232");
            let path = response.image;
            // console.log(this.type);
            if (that.type == 1) {
              // console.log(999);
              that.identity_up = response.image;
              that.idname = response.idname;
              that.idnumber = response.idnumber;
              that.teamData.identity_up = path;
            } else {
              that.identity_down = response.image;
              that.teamData.identity_down = path;
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          // console.log(error);
        });
    },

    //上传护照或者港澳台 照片的正面
    uploadbut: function (e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
        that.$refs.uploadImg.value = "";
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            let image = new Image();
            image.onload = function () {
              let width = image.width;
              let height = image.height;
              let cl = height / width;
              that.uploadImgFn(res.target.result);
            };
            image.src = res.target.result;
          };
          reader.readAsDataURL(file);
        }
      }
    },

    // 上传图片到服务器正
    uploadImgFn: function (imgData) {
      let that = this;
      let url = "/upload/uploadImage";
      let data = {
        source: 2,
        image: imgData,
      };
      // Indicator.open("上传中...");
      this.axios
        .post(url, JSON.stringify(data))
        .then((res) => {
          // Indicator.close();
          // console.log(res, "222");
          if (res.code == 0) {
            // console.log(res, "res");
            let path = res.image;
            that.identity_up = res.image;
            // console.log(that.identity_up, "2222");
            that.teamData.identity_up = path;
          } else {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          // console.log(error);
        });
    },

    // 添加
    add() {
      console.log(this.idname, " that.idname", this.teamData.teamName);
      // console.log(
      //   this.idnumber,
      //   "that.idnumber",
      //   this.teamData.identity_number
      // );
      if (
        this.teamData.photo == "" ||
        this.teamData.teamName == "" ||
        this.teamData.teamNum == "" ||
        this.teamData.leaderName == "" ||
        this.teamData.sex == "" ||
        this.teamData.identity_number == "" ||
        this.teamData.identity_up == ""
      ) {
        Toast({
          message: "请先完善身份信息",
        });
        return false;
      } else if (this.value1 == 1) {
        // 验证身份正则
        let idNumberText =
          /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/;
        if (!idNumberText.test(this.teamData.identity_number)) {
          Toast({
            message: "身份证格式不正确",
          });
          return false;
        }
        if (this.teamData.identity_number != this.idnumber) {
          Toast({
            message:
              "证件号码与上传照片中证件号码不符 该证件号为" + this.idnumber,
          });
          return false;
        }
        if (this.teamData.teamName != this.idname) {
          Toast({
            message: "姓名与上传照片中姓名不符 该姓名为" + this.idname,
          });
          return false;
        }
      } else {
        let idNumber = /^[A-Za-z0-9]+$/;
        if (!idNumber.test(this.teamData.identity_number)) {
          Toast({
            message: "证件格式不正确",
          });
          return false;
        }
      }
      let url = "/mobile/addPlayer";
      let data = {
        name: this.teamData.teamName,
        height: this.teamData.leaderName,
        weight: this.teamData.leaderNumber,
        identity_number: this.teamData.identity_number,
        photo: this.uploadUrl,
        age: this.teamData.teamNum,
        sex: this.value2,
        identity_type: this.value1,
        identity_up: this.identity_up,
        identity_down: this.identity_down,
      };
      Indicator.open();
      this.axios
        .post(url, data)
        .then((res) => {
          Indicator.close();
          if (res.code == 0) {
            if (this.$route.query.state == "addPlayers") {
              this.$router.push({
                name: "addPlayers",
              });
            }else{
              this.$router.push({
                name: "addMember",
              });
            }
          } else {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          // console.log(error);
        });
    },
  },
  watch: {
    teamData: {
      handler(newval, oldval) {},
      deep: true,
    },
  },
};
</script>
<style>
.van-dropdown-menu__bar {
  background-color: #ffff !important;
  box-shadow: none !important;
}

.van-popup--top {
  width: 6.95rem !important;
  margin-left: 0.27rem;
  /* left: 50%; */
  /* transform: translateX(-50%); */
}
.van-dropdown-menu__item {
  justify-content: space-between !important;
}
.imgs {
  display: flex;
  justify-content: space-around;
}
</style>
